<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/base}">
<head>
    <title>视频上传</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div layout:fragment="content">
    <!-- 页面标题 -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0">视频上传</h1>
        <div class="btn-group">
            <button class="btn btn-outline-secondary">
                <i class="fas fa-sync-alt"></i> 刷新
            </button>
        </div>
    </div>

    <div class="container mt-5">
<!--        <h2>上传视频</h2>-->
        <a href="/api/videos" class="btn btn-secondary mb-3">返回列表</a>

        <!-- 提示信息 -->
        <div th:if="${success}" class="alert alert-success" th:text="${success}"></div>
        <div th:if="${error}" class="alert alert-danger" th:text="${error}"></div>

        <!-- 上传表单 -->
        <form th:action="@{/api/videos/upload}" method="post" enctype="multipart/form-data" class="col-md-6">
            <div class="mb-3">
                <label for="title" class="form-label">视频标题</label>
                <input type="text" class="form-control" id="title" name="title" required>
            </div>
            <div class="mb-3">
                <label for="uploader" class="form-label">上传者</label>
                <input type="text" class="form-control" id="uploader" name="uploader" required>
            </div>
            <div class="mb-3">
                <label for="file" class="form-label">选择视频文件（最大100MB）</label>
                <input type="file" class="form-control" id="file" name="file" accept="video/*" required>
            </div>
            <button type="submit" class="btn btn-primary">上传</button>
        </form>
    </div>
</div>

<div layout:fragment="scripts">
    <script>
        // 仪表板特定的JS代码
        console.log('仪表板加载完成');
    </script>
</div>
</body>
</html>